<template>
	<div class="template-management">
		<zk-searcher v-model="query" :options="searchColumns" />
		<w-block class="body" title="模版信息列表" style="margin-top: 10px">
			<template #list>
				<div class="btn-list">
					<el-button class="btn-list-item" type="primary" @click="handleAdd()">增加</el-button>
					<el-button class="btn-list-item" type="warning" @click="doUpdate()">修改</el-button>
					<el-button class="btn-list-item" type="danger" @click="doDelete">删除</el-button>
					<el-button class="btn-list-item" type="default" @click="handleCopy">复制</el-button>
				</div>
			</template>
			<zk-table
				:columns="tableColumns"
				:service="service"
				:query="query"
				use-selection
				:actions="actions"
				@onSelectionChange="onSelection"
				@refresh-data="getRefreshData"
			>
				<template #control="scope">
					<el-button type="text" size="small" @click="management(scope.row)">流程管理</el-button>
					<el-button type="text" size="small" :disabled="scope.row.is_start == 1" @click="modelStart(scope.row,1)">启用</el-button>
					<el-button type="text" size="small" :disabled="scope.row.is_start == 0" @click="modelStart(scope.row,0)">停用</el-button>
				</template>
			</zk-table>
		</w-block>
		<w-dialog :visible.sync="visible" height="auto" :title="modalTitle">
			<el-form ref="modelForm" :model="model" label-width="100px">
				<el-row>
					<el-col
						v-for="item of formColumns"
						:key="item.key"
						:span="item.span || 22"
					>
						<el-form-item
							:label="item.label"
							:prop="item.key"
							:rules="
                item.required && [
                  {
                    required: true,
                    message: `请输入${item.label}`,
                    trigger: ['blur'],
                  },
                ]
              "
						>
							<zk-item-pool
								v-model="model[item.key]"
								:option="{ ...item, disabled: item.disabled }"
							/>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<div class="flex-end">
					<el-button type="default" @click="visible = false">取 消</el-button>
					<el-button type="primary" @click="submit">保 存</el-button>
				</div>
			</template>
		</w-dialog>
		<w-dialog :visible.sync="diashow" height="auto" :title="title">
			<div class="centerbox">
				<div class="item">
					<div class="datatitle">模板名称：</div>
					<div class="datalist">
						<el-input
							v-model="templateName"
							placeholder="请输入内容"
						></el-input>
					</div>
				</div>
			</div>
			<template #footer>
				<div class="flex-end">
					<el-button type="default" @click="diashow = false">取消</el-button>
					<el-button type="primary" @click="keepclick">保存</el-button>
				</div>
			</template>
		</w-dialog>
	</div>
</template>
<script>
import { TYPE_ENUM }                     from "@/common/zk-constants"
import { templateManagement as service } from "@/services"
import SearchTableCRUDMixin              from "@/mixins/search-table-crud-mixin"

const columns = [
	{
		label   : "模版名称",
		key     : "templateName",
		table   : true,
		search  : true,
		form    : true,
		required: true,
	},
	{
		label   : "项目类型",
		key     : "project_type",
		table   : true,
		search  : true,
		type    : TYPE_ENUM.SELECT,
		storeKey: "projectType",
		form    : true,
		required: true,
	},
	{ label: "使用场景", key: "content", table: true, form: true, required: true, },
	{
		label   : "状态",
		key     : "is_start",
		table   : true,
		search  : true,
		type    : TYPE_ENUM.SELECT,
		storeKey: "templateState",
		form    : false,
	},
	{
		label: "启动时间",
		key  : "start_time",
		table: true,
		type : TYPE_ENUM.DATE_TIME,
		form : false,
	},
	{
		label: "结束时间",
		key  : "end_time",
		table: true,
		type : TYPE_ENUM.DATE_TIME,
		form : false,
	},
	{ label: "创建人", key: "create_person_name", table: true },
	{ label: "创建机构", key: "create_dept_name", table: true },
	{ label: "创建时间", key: "create_date", table: true },
]

// const actions = [
// 	{classname: 'primary', text: '流程管理', type: 'manager'},
// 	{classname: 'primary', text: '启用', type: 'enable'},
// 	{classname: 'primary', text: '停用', type: 'disable'},
// ]

const actions = ["slot", 200]

export default {
	mixins  : [SearchTableCRUDMixin],
	data() {
		return {
			columns,
			service,
			actions,
			diashow     : false,
			title       : "复制",
			templateName: "",
			tempid      : null,
		}
	},
	computed: {
		modalTitle() {
			return this.isAddModal ? "添加" : "编辑"
		},
	},
	methods : {
		getRefreshData({ tableData }) {
			//   console.log("getRefreshData", tableData);
			tableData.forEach((item) => {
			})
		},
		management(res) {
			sessionStorage.templateIsStart = res.is_start === 1
			sessionStorage.setItem("template_name", res.templateName)
			this.$router.push(`/job-information-list/${ res.id }`)
		},
		async modelStart(res, startFlag = 0) {
			sessionStorage.templateIsStart = !!startFlag
			await this.service.setStart(res.id, startFlag) && this.reload()
		},
		doUpdate() {
			if (this.selectedRows.length) {
				const [first] = this.selectedRows
				if (first.is_start !== 1) {
					this.handleUpdate()
				}
				else {
					this.$message.warning('启动的模版不可修改')
				}
			}
		},
		doDelete() {
			if (this.selectedRows.length) {
				if (this.selectedRows.every(e => e.is_start !== 1)) {
					this.handleDelete()
				}
				else {
					this.$message.warning('启动的模版不可删除')
				}
			}
		},
		async handleCopy() {
			const [first] = this.selectedRows
			if (first) {
				this.templateName = first.templateName
				this.tempid = first.id
				this.diashow = true
				// todo 后端接口
				// return await this.service.copy(first.id) && this.reload()
				// const { id } = await this.service.copy(first.id) || {}
				// if (id) {
				//   const model = { ...first, templateName: '_' + first.templateName, id }
				//   delete model.id
				//   this.handleAdd()
				//   this.model = model
				// } else {
				//   this.$message.error('复制失败')
				// }
				console.log(first)
				// const model = {...first, templateName: '_' + first.templateName}
				// delete model.id
				// this.handleAdd()
				// this.model = model
			}
			else {
				this.$message.warning("请选择模版")
			}
		},
		async keepclick() {
			this.diashow = false
			return (
				(await this.service.copy(this.tempid, this.templateName)) &&
				this.reload()
			)
		},
	},
}
</script>
<style scoped lang="scss">
	.centerbox {
		display: flex;
		flex-direction: column;
		width: 100%;

		.item {
			display: flex;
			flex-direction: row;
			padding: 10px 10px;
			font-size: 16px;

			.datatitle {
				width: 30%;
				display: flex;
				justify-content: flex-end;
				align-items: center;
			}

			.datalist {
				width: 65%;
				padding-left: 20px;
			}
		}
	}
</style>
